<template>
    <div>
        <div class="mt-20 flex align-center jus-center">
            <!-- <img :src="login_qrcode" alt style="width:12vw;height:12vw" /> -->
            <div class="position-relative">
                <el-image :src="login_qrcode" @click="init()" fit="fill" style="width:12vw;height:12vw" v-loading="qrcode_loading">
                    <div class="image-slot" slot="error">
                        <i class="el-icon-picture-outline"></i>
                    </div>
                </el-image>
                <div class="confirm-login" v-if="scan || expire">
                    <div v-if="scan">
                        <i class="el-icon el-icon-check weight-bold font-16 mt-2 mr-4" style="color:#28db27"></i>
                        <span>扫码成功，等待确认登录</span>
                    </div>
                    <div @click="init()" class="cursor-pointer" v-if="expire">
                        <span>二维码失效，点击刷新</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="text-center color-999 mt-30">打开陪秀APP扫码登录</div>
    </div>
</template>

<script>
import { login_qrcode, check_login } from '@/api/login'
export default {
    data() {
        return {
            login_qrcode: '',
            key: '',
            scan: false,
            expire: false,
            qrcode_loading: false,
        }
    },
    props: {
        current_tab: {
            type: String,
            default: 'qrcode',
        },
    },
    watch: {
        current_tab(value) {
            if (value == 'qrcode') {
                this.getQrcode()
            }
        },
    },
    mounted() {
        this.getQrcode()
    },
    methods: {
        getQrcode() {
            this.scan = false
            this.expire = false
            this.qrcode_loading = true
            login_qrcode()
                .then((res) => {
                    this.key = res.key
                    this.login_qrcode = res.path
                    this.checkLogin()
                })
                .catch((error) => {})
                .finally((res) => {
                    this.qrcode_loading = false
                })
        },
        init() {
            this.scan = false
            this.expire = false
            this.getQrcode()
        },
        checkLogin() {
            let that = this
            if (this.current_tab != 'qrcode') {
                return false
            }
            setTimeout(() => {
                check_login(that.key)
                    .then((res) => {
                        if (res.scan) {
                            this.scan = true
                            if (res.access_token) {
                                this.scan = false
                                this.expire = false
                                this.login_qrcode = ''
                                this.$store.dispatch('user/cacheToken', res.access_token).then((res) => {
                                    this.$store.state.system.login_visible = false
                                })
                                //关闭弹窗emit
                                // 获取用户信息接口
                                return true
                            }
                        }
                        if (this.current_tab == 'qrcode') {
                            that.checkLogin()
                        } else {
                            this.login_qrcode = ''
                            this.key = ''
                            this.scan = false
                            this.expire = false
                        }
                    })
                    .catch((error) => {
                        if (error.data.expire == true) {
                            this.expire = true
                        }
                    })
            }, 800)
        },
    },
}
</script>

<style lang="scss" scoped>
.confirm-login {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.8);
    font-size: 12px;
    color: #fff;
}
</style>